<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width: 750px;
	height: 500px;
}

.portlet-default {
	padding: 20px;
}
.avatar-uploader 
.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

</head>
<body>
	<div id="app" class="app" >
		<div class="portlet-heading portlet-default">
			<h4 class="modal-title text-dark" align="center">
				<span set-lan="html:用户添加"></span>
			</h4>
			<hr class="border-t-a">
		</div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm"
			label-width="100px" class="demo-ruleForm">
			<el-container>			
			<el-aside width="210px">
			 <el-upload
                 class="avatar-uploader"
                  action="/userwjlfile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                 <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
			</el-aside>
            <el-main>
             <el-form-item label="姓名:" prop="username"> 
			<el-col :span="9">
		<el-input type="input" autosize v-model="ruleForm.username"></el-input>
		</el-col> 
		<el-col class="line" :span="4" :offset="1" style="color: #8c939d;">登录名:</el-col>
		 <el-col :span="9">
		  <el-form-item  prop="loginname"> 
			 <el-input type="input" v-model="ruleForm.loginname"></el-input>
			</el-form-item>
			 </el-col> 
			</el-form-item>
			 <el-form-item label="手机：">
		<el-col :span="9"> 
		<el-form-item prop="userphone">
		<el-input type="input" autosize v-model="ruleForm.userphone"></el-input>
		</el-form-item> 
		</el-col>
		
		<el-col class="line" :span="4" :offset="1" style="color: #8c939d;">角色：</el-col>
		 <el-col :span="9">
		  <!-- <el-form-item label="角色：" prop="role">  -->
		 <!--  <el-select autosize v-model="ruleForm.role" @change="selectChange"> 
		  <el-option v-for="item in treeListData" :label="item.rol_name" :value="item.rol_id"></el-option>
		   </el-select> -->
		   <!-- <el-input v-model="ruleForm.role" :disabled="true" :value="treeListData.rol_id"></el-input>
		   <el-input v-model="ruleForm.roleid" :disabled="true" v-show="false"></el-input> -->
		   <el-select autosize	v-model="ruleForm.role" @change="selectChange">
		   <el-option v-for="item in rolesedata" :label="item.rol_name" :value="item.rol_id"></el-option> 
		   </el-select>
		   <!--  </el-form-item> -->
		     </el-col> 
		     </el-form-item> 
		     <el-form-item label="密码:" prop="password">
		     <el-col :span="9"> 
		      <el-input v-model="ruleForm.password" ></el-input>
		         </el-col>
		        <el-col :span="4" :offset="1" style="color: #8c939d;">部门:</el-col>	
		     <!--  <el-form-item label="部门:" prop="dept"> -->
		      <el-col :span="9"> 
		      <el-input v-model="ruleForm.dept" :disabled="true"></el-input>
		      <el-input v-model="ruleForm.deptid" v-show="false"></el-input>
		        </el-col>
		       </el-form-item>
		       	    <el-form-item label="性别:" prop="sex">
		       	     <el-col :span="9"> 
		      <el-select v-model="ruleForm.sex">
				<el-option label="男" :value="0"></el-option>
				<el-option label="女" :value="1"></el-option>
			 </el-select>		
			 </el-col>	
			 	<el-col :span="4" :offset="1" style="color: #8c939d;">年龄:</el-col>			 
			       <el-col :span="9"> 
			       <el-form-item  prop="age">
		      <el-input v-model="ruleForm.age" ></el-input>
		      </el-form-item>
		      </el-col>
			  </el-form-item>		
			<!--    <el-form-item label="权限：" prop="value5">
							<template>
							    <el-select  v-model="form.value5" multiple
								placeholder="请选择"> <el-option
								v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value"> </el-option> </el-select>
								</template>								
								</el-form-item> -->
		<!-- 
		
		        
		        <br /> -->
            </el-main>
			</el-container>
			<el-row :gutter="20">
			<el-col :span="12" :offset="6">
			 <el-form-item> 
		 <el-button @click="resetForm('ruleForm')">取消</el-button> 
		 <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
		 </el-col> 
			</el-form-item> 
			</el-row>
			</el-form>
	</div>
	
	<script>
			var vm= new Vue({
				el: ".demo-ruleForm",
				data() {
					return {
						treeListData:[],
						treeListDatase:[],
						rolesedata:[],
						options:[],
						ruleForm: {
							username: '',
							loginname: '',
							userphone: '',
							imageUrl:'',
							age:'',
							role: '',
							password:'',
							deptid:'',
							roleid:'',
							sex:'',
							dept: ''
						},
						//验证规则
						rules: { //数据源model
							username: [{
									required: true,
									message: '请输入用户名',
									trigger: 'blur'
								},
							],
							loginname:[
								{
									required: true,
									message: '请输入登录名',
									trigger: 'blur'
								}
							],
							userphone:[
								{
									required: true,
									message: '请输入电话号码',
									trigger: 'blur'
								},
								{  min:11,max:11,message: '电话格式错误',  trigger: 'blur'},
								   {pattern: /^1[34578]\d{9}$/, message: '手机号格式错误'}
								
							],
							age:[
								{
									required: true,
									message: '请输入年龄',
									trigger: 'blur'
								},
								 {pattern: /^[1234567][0123456789]$/, message: '年龄输入错误'}
							],
							password:[
								{
									required: true,
									message: '密码不能为空',
									trigger: 'blur'
								},
								//长度验证
								{
									min:3,
									max:18,
									message: '长度在 3 到 518个字符',
									trigger: 'blur'
								}
							],
							sex:[
								{
									required: true,
									message: '员工性别不能为空',
									trigger: 'blur'
								}
							],
						}
					};
					 
				},
				methods: {
					submitForm(formName) {
						//alert(this.ruleForm);
						//验证方法
						alert(this.ruleForm.deptid);
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/setUseradd",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})
								).then(function(v) {
									//console.log("回调成功，获取了服务器端返回的值v");
										alert(v.data.usetype);
									if(v.data.usetype=="添加成功"){
										 window.parent.location.replace("/dept");
										 vm.loading();
									}
									/* 	parent.location.reload(); */
								}).catch(function() {
									
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					loading:function(){
						 const loading = this.$loading({
					          lock: true,
					          text: 'Loading',
					          spinner: 'el-icon-loading',
					          background: 'rgba(0, 0, 0, 0.7)'
					        });
					        setTimeout(() => {
					          loading.close();
					        }, 2000);
					},
					 handleAvatarSuccess(res, file) {
						
					       this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
					      /*  var imgsss = document.getElementById('dswcx').src; */
					  // 	alert(imgsss);
					      
					      /*  this.ruleForm.src = imgsss ; */
					      },
					      beforeAvatarUpload(file) {
					      //  const isJPG = file.type === 'image/jpeg';
					         const isLt2M = file.size / 1024 / 1024 < 2;

					        /* if (!isJPG) {
					          this.$message.error('上传头像图片只能是 JPG 格式!');
					        } */
					        if (!isLt2M) {
					          this.$message.error('上传头像图片大小不能超过 2MB!');
					        }
					        return isLt2M;
					      },
					resetForm(formName) {
						/* this.$refs[formName].resetFields(); */
						window.close();
						parent.location.reload();
					},
					handleSelect: function(it) {
						console.log(it)
					},
					selectChangedept:function(){
						
					},
					selectChange:function(){
						
					}
				},
				mounted() {
					var piliang = ${piliang};
					//console.info(piliang+"        piliang")
					this.treeListData=piliang;
					this.treeListDatase=piliang;
				//	console.info(this.treeListData+"        this.treeListData");
					//console.info(this.treeListDatase+"      this.treeListDatase");
					var list=this.treeListData;
					 var listse=this.treeListDatase;
						/* if(piliang){
							var news = ${piliang};						
						} */
						for(var i in list){
							this.rolesedata.push(list[i]);
							this.ruleForm.dept =list[i].dep_name;
							this.ruleForm.deptid=list[i].dep_id;
							//alert(this.ruleForm.dep_name);
							/* if((list[i].rol_name=="产品员"||list[i].rol_name=="产品主管")&&list[i].dep_name.substring(0,2)=="产品"){

								
								this.rolesedata.push(list[i]);
								this.ruleForm.dept =list[i].dep_name;
								this.ruleForm.deptid=list[i].dep_id;
							}else 
							if((list[i].rol_name=="维修员"||list[i].rol_name=="维修主管")&&list[i].dep_name.substring(0,2)=="维修"){
								
								this.rolesedata.push(list[i]);
								this.ruleForm.dept =list[i].dep_name;  
								this.ruleForm.deptid=list[i].dep_id;
							}else
							if((list[i].rol_name=="客服"||list[i].rol_name=="客服主管")&&list[i].dep_name.substring(0,2)=="客服"){
							
								this.rolesedata.push(list[i]);
								this.ruleForm.dept =list[i].dep_name;
								this.ruleForm.deptid=list[i].dep_id;
							}else
							if((list[i].rol_name=="销售员"||list[i].rol_name=="销售主管")&&list[i].dep_name.substring(0,2)=="销售"){
								
								this.rolesedata.push(list[i]);
								this.ruleForm.dept =list[i].dep_name;
								this.ruleForm.deptid=list[i].dep_id;
							}else if(list[i].rol_name=="老板"&&list[i].dep_name.substring(0,2)=="公司"){
							
								this.ruleForm.dept =list[i].dep_name;
								this.rolesedata.push(list[i]);
								this.ruleForm.deptid=list[i].dep_id;
							} */

						}
						console.log(this.rolesedata+"    this.rolesedata")
						alert(this.ruleForm.dept);
					//alert(this.ruleForm.role);
				}
			});
		</script>
</body>
</html>